<template>
  <div>
    <!-- 表格标签 -->
    <el-table :data="shopList" style="width: 100%" border stripe>

      <el-table-column type="expand">
        <template #default="props">
          <el-descriptions class="margin-top" :column="3" border>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  店铺地址:
                </div>
              </template>
              {{ props.row.shop_address }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  店铺介绍:
                </div>
              </template>
              {{ props.row.shop_explain }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  起送金额:
                </div>
              </template>
              {{ props.row.start_price }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  配送费:
                </div>
              </template>
              {{ props.row.delivery_price }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  备注:
                </div>
              </template>
              {{ props.row.remarks }}
            </el-descriptions-item>

            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  是否推荐:
                </div>
              </template>
              {{ props.row.recommend == 0 ? '不推荐' : '推荐' }}
            </el-descriptions-item>

          </el-descriptions>

        </template>
      </el-table-column>

      <el-table-column type="index" width="100" label="序号" align="center" />
      <el-table-column prop="shop_name" label="店铺名称" align="center" />
      <el-table-column label="店铺图片" align="center">
        <template #default="scope">
          <img :src="scope.row.shop_img" alt="" width="50px" height="50px">
        </template>
      </el-table-column>
      <el-table-column prop="category_name" label="店铺分类" align="center" />
      <el-table-column prop="start_time" label="营业时间" align="center" />
      <el-table-column prop="end_time" label="闭店时间" align="center" />
      <el-table-column label="状态" align="center">
        <template #default="scope">

          <el-tag v-if="scope.row.status == 0" type="danger">未审核</el-tag>
          <el-tag v-if="scope.row.status == 1" type="success">已审核</el-tag>
          <el-tag v-if="scope.row.status == 2" type="primary">营业</el-tag>
          <el-tag v-if="scope.row.status == 3" type="info">歇业</el-tag>
          <el-tag v-if="scope.row.status == 4" type="warning">违规</el-tag>

        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" @click="gotoFoodCategory(scope.row.shop_id)" v-if="scope.row.status != 0">
            查询菜品分类
          </el-button>
          <el-button type="primary">修改</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { shopList } from '@/api/shop.js'
export default {
  data() {
    return {
      shopList: []
    }
  },
  methods: {
    // 点击添加菜品分类按钮
    gotoFoodCategory(shopId) {
      // 跳转到添加菜品分类的页面
      this.$router.push({
        path: "/foodCategory",
        query: {
          shopId
        },
      });
    },
  },
  created() {
    let loginInfo = JSON.parse(sessionStorage.getItem("businessInfo"));

    if (loginInfo == null) {
      //路由到登录页面
      this.$router.push("/login");
      return;
    }

    shopList(loginInfo.id).then((result) => {
      this.shopList = result.data;
    })
  }
}
</script>

<style scoped></style>